<template>
<div class="admin-box" 
    :class="{fixed: fixed}"
    >
    <div class="admin-header" 
        :style="doTheme.headerCss"
        >
        <slot name="header"></slot>
    </div>
    <aside class="admin-sidebar m-scrollbar"
        :style="doTheme.sidebarCss"
        >
        <slot name="sidebar"></slot>
    </aside>
    <section class="admin-container"
        :style="doTheme.containerCss"
        >
        <div class="admin-content"
            :style="doTheme.contentCss"
            >
            <slot></slot>
        </div>
    </section>
    <section class="admin-footer" v-if="!hideFooter"
        :style="doTheme.footerCss"
        >
        <slot name="footer"></slot>
    </section>
</div>
</template>
<style lang="less" scoped>
    @admin-header-height: 50px;
    @admin-side-width: 230px;
    @admin-footer-height: 50px;
    .admin-box{
        position: relative;
        min-height: 100vh;
        background: #ECF0F5;
    }
    .admin-header,
    .admin-sidebar,
    .admin-container,
    .admin-content,
    .admin-footer{
        box-sizing: border-box;
         -webkit-transition: all .4s cubic-bezier(0.06, 0.04, 0.2, 1);
        -moz-transition: all .4s cubic-bezier(0.06, 0.04, 0.2, 1);
        -o-transition: all .4s cubic-bezier(0.06, 0.04, 0.2, 1);
        -ms-transition: all .4s cubic-bezier(0.06, 0.04, 0.2, 1);
        transition: all .4s cubic-bezier(0.06, 0.04, 0.2, 1);
    }
    .admin-header{
        height: @admin-header-height;
        background: #3C8DBC;
        position: relative;
        width: 100%;
        max-height: 100px;
        z-index: 1000;
    }
    .admin-sidebar{
        position: absolute;
        top: 0;
        left: 0;
        margin-top: @admin-header-height;
        min-height: ~"calc(100% - 50px)";
        width: @admin-side-width;
        background: #222D32;
    }
    .admin-container{
        margin-left: @admin-side-width;
        min-height: calc(~"100vh - @{admin-header-height} * 2");
        overflow: auto;
    }
    .admin-content{
        padding: 15px;
        min-height: calc(~"100% - @{admin-header-height}");
    }
    .admin-footer{
        margin-left: @admin-side-width;
        height: @admin-footer-height;
        background: #fff;
        border-top: 1px solid #dee5e7;
    }


    .admin-box.fixed .admin-header,
    .admin-box.fixed .admin-sidebar{
        position: fixed;
    }
    .admin-box.fixed .admin-sidebar{
        overflow: auto;
        bottom: 0;
    }
    .admin-box.fixed .admin-container{
        padding-top: @admin-header-height;

    }

</style>



<script type="text/javascript">
export default {
  name: 'admin-layout',
  props: {
    fixed: {
      type: Boolean,
      default: false
    },
    hideFooter: {
      type: Boolean,
      default: false
    },
    miniSidebar: {
      type: Boolean,
      default: false
    },
    miniSidebarWidth: {
      type: String,
      default: '50px'
    },
    theme: {
      type: Object,
      default: function () {
        return {}
      }
    }
  },
  computed: {
    doTheme () {
      let theme = JSON.parse(JSON.stringify(this.theme))
      // let theme = {...this.theme}
      if (theme.headerCss && theme.headerCss.height) {
        let footerH = theme.footerCss && theme.footerCss.height ? theme.footerCss.height : '50px'
        if (this.fixed) {
          setObjectAttr(theme, 'containerCss', 'padding-top', theme.headerCss.height)
          setObjectAttr(theme, 'contentCss', 'min-height', 'calc(100% - ' + theme.headerCss.height + ')')
          setObjectAttr(theme, 'containerCss', 'min-height', 'calc(100vh  - ' + footerH + ')')
        } else {
          setObjectAttr(theme, 'containerCss', 'min-height', 'calc(100vh  - ' + theme.headerCss.height + ' - ' + footerH + ')')
        }
        setObjectAttr(theme, 'sidebarCss', 'margin-top', theme.headerCss.height)
        setObjectAttr(theme, 'sidebarCss', 'min-height', 'calc(100% - ' + theme.headerCss.height + ')')
      }
      if (this.miniSidebar) {
        console.log('====')
        setObjectAttr(theme, 'sidebarCss', 'width', this.miniSidebarWidth)
      } else {

      }
      if (theme.sidebarCss && theme.sidebarCss.width) {
        setObjectAttr(theme, 'containerCss', 'margin-left', theme.sidebarCss.width)
        setObjectAttr(theme, 'footerCss', 'margin-left', theme.sidebarCss.width)
      }
      return theme
    }
  },
  created () {
    console.log(this.$props)
  }
}

function setObjectAttr (obj, attr, key, val) {
  if (obj[attr]) {
    obj[attr][key] = val
  } else {
    obj[attr] = {}
    obj[attr][key] = val
  }
}
</script>
